//引入node内置模块,无需下载,直接引入
const path = require('path')

//处理html的插件
const HtmlWebpackPlugin = require('html-webpack-plugin')


//提取css插件
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
//压缩css
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')

//引入
const { CleanWebpackPlugin } = require('clean-webpack-plugin')






//暴露webpack对象
module.exports = {
    //设置打开位置(和五大特性同级)
    target: 'web',

    //入口entry
    entry: {
        //公共样式
        comJs:'./src/js/comJs.js',


        //公共js
        dom:'./src/js/commonJs/dom.js',
        http:'./src/js/commonJs/http.js',
        utils:'./src/js/commonJs/utils.js',

       
        //插件js验证码
        captcha:'./src/lib/captcha/captcha-mini.js',
        //轮播图插件js
        swiper:'./src/lib/swiper/swiper.js',


        //页面js
        home: './src/js/home.js',
        advert:'./src/js/advert.js',
        register:'./src/js/register.js',
        enter: './src/js/enter.js',
        mine: './src/js/mine.js',
        sportsing: './src/js/sportsing.js',
        medal: './src/js/medal.js',
        material: './src/js/material.js',
        riding: './src/js/riding.js',
        running: './src/js/running.js',
        course: './src/js/course.js',
        courseDescription: './src/js/courseDescription.js',
        drill: './src/js/drill.js',
        sportsdata: './src/js/sportsdata.js',
    },

    //出口output
    output: {
        path: path.resolve(__dirname, 'dist'), //出口路径
        filename: 'js/[name]-[hash:5].js',//输出文件名字
        publicPath: './'
    },

    //加载器loader
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [{
                    loader: MiniCssExtractPlugin.loader,
                    options: {
                        publicPath: '../'
                    }
                }, 'css-loader']
            },

            {
                test: /\.less$/,
                use: [{
                    loader: MiniCssExtractPlugin.loader,
                    options: {
                        publicPath: '../'
                    }
                }, 'css-loader', 'postcss-loader', 'less-loader']
            },

            {
                test: /\.(jpg|png|gif|jpeg)$/,
                loader: 'url-loader',
                options: {
                    name: '[hash:16].[ext]',  // 图片输出的名字hash长度16位 默认32位
                    limit: 24 * 1024,  // 小于10kb base64处理
                    esModule: false, //关闭es6模块化
                    outputPath: 'imgs' //将图片放在imgs中
                }
            },
            {
                test: /\.html$/, // 处理html中引入img
                loader: 'html-loader',
                options:{
                    esModule: false, //关闭es6模块化
                }
            },


            {
                test: /\.(eot|svg|ttf|woff|woff2)$/,  // 处理字体格式文件
                loader: 'file-loader',
                options: {
                    name: '[hash:16].[ext]', // 输出名字
                    outputPath: 'fonts' // 输出路径
                }
            },

            {
                test: /\.js$/,
                loader: 'babel-loader',    // loader 编译es6为es5
                exclude: /node_modules/  // 排除
            }
        ]
    },





    //插件plugins
    plugins: [
        //首页
        new HtmlWebpackPlugin({
            template: './src/page/home.html',//把home.html复制到dist中,自动引入资源
            filename: 'home.html',
            chunks: ['home','dom','comJs','utils','http','swiper'] //引入资源
        }),
        //广告业
        new HtmlWebpackPlugin({
            template: './src/page/advert.html',//把advert.html复制到dist中,自动引入资源
            filename: 'advert.html',
            chunks: ['advert','dom','comJs'] //引入资源
        }),
        //注册页
        new HtmlWebpackPlugin({
            template: './src/page/register.html',//把register.html复制到dist中,自动引入资源
            filename: 'register.html',
            chunks: ['register','dom','comJs','captcha','http','utils'] //引入资源
        }),
        //登入页
        new HtmlWebpackPlugin({
            template: './src/page/enter.html',//把enter.html复制到dist中,自动引入资源
            filename: 'enter.html',
            chunks: ['enter','dom','comJs','http','utils'] //引入资源
        }),
        //我的页
        new HtmlWebpackPlugin({
            template: './src/page/mine.html',//把mine.html复制到dist中,自动引入资源
            filename: 'mine.html',
            chunks: ['mine','dom','comJs','utils','http'] //引入资源
        }),
        //sportsing 运动页
        new HtmlWebpackPlugin({
            template: './src/page/sportsing.html',//把sportsing.html复制到dist中,自动引入资源
            filename: 'sportsing.html',
            chunks: ['sportsing','dom','comJs','utils','http'] //引入资源
        }),
        //徽章页
        new HtmlWebpackPlugin({
            template: './src/page/medal.html',//把medal.html复制到dist中,自动引入资源
            filename: 'medal.html',
            chunks: ['medal','dom','comJs','utils'] //引入资源
        }),
        //个人资料页
        new HtmlWebpackPlugin({
            template: './src/page/material.html',//把material.html复制到dist中,自动引入资源
            filename: 'material.html',
            chunks: ['material','dom','comJs','http','utils'] //引入资源
        }),
        //骑行页
        new HtmlWebpackPlugin({
            template: './src/page/riding.html',//把riding.html复制到dist中,自动引入资源
            filename: 'riding.html',
            chunks: ['riding','dom','comJs','http','utils'] //引入资源
        }),
        //跑步页
        new HtmlWebpackPlugin({
            template: './src/page/running.html',//把running.html复制到dist中,自动引入资源
            filename: 'running.html',
            chunks: ['running','dom','comJs','http','utils'] //引入资源
        }),
        //个人资料页
        new HtmlWebpackPlugin({
            template: './src/page/course.html',//把course.html复制到dist中,自动引入资源
            filename: 'course.html',
            chunks: ['course','dom','comJs','http','utils'] //引入资源
        }),
        //课程介绍courseDescription
        new HtmlWebpackPlugin({
            template: './src/page/courseDescription.html',//把courseDescription.html复制到dist中,自动引入资源
            filename: 'courseDescription.html',
            chunks: ['courseDescription','dom','comJs','http','utils'] //引入资源
        }),
        //课程训练drill
        new HtmlWebpackPlugin({
            template: './src/page/drill.html',//把drill.html复制到dist中,自动引入资源
            filename: 'drill.html',
            chunks: ['drill','dom','comJs','http','utils'] //引入资源
        }),
        //运动数据sportsdata
        new HtmlWebpackPlugin({
            template: './src/page/sportsdata.html',//把sportsdata.html复制到dist中,自动引入资源
            filename: 'sportsdata.html',
            chunks: ['sportsdata','dom','comJs','http','utils'] //引入资源
        }),
        


        

        // 提取css
        new MiniCssExtractPlugin({
            filename: 'css/[name]-[hash:5].css' // 重命名输出的css
        }),

        // 压缩css
        new OptimizeCssAssetsWebpackPlugin(),

        //删除
        new CleanWebpackPlugin()
    ],

    //模式mode
    mode: process.env.NODE_ENV === 'dev' ? 'development' : 'production',


    // 开发服务器 -- 和五大特性同级
    devServer: {
        contentBase: path.resolve(__dirname, 'dist'), // 启动服务器目录
        compress: true, // 启动gzip压缩
        progress: true, //打包进度
        port: 9999,  // 端口
        open: true, // 自动打开浏览器
        openPage: 'advert.html', // 指定当前要打开页面的名字
        publicPath: '/' //服务器根目录
    }



}



